<script setup>

import {computed, defineProps,defineEmits} from "vue";
import {formsOutCssMapping} from "@/components/constants";
import CommonTagDisplay from "@/components/WordFormedTag/CommonTagDisplay.vue";
import {keys,keysIn} from "lodash";

const theProps = defineProps(["label","pickedDoneClosableSw","mode"]);
const emits = defineEmits(["closeTag"]);
const styleObject = computed(() =>{
  //v.idioms.make_as_if_to_do
  //v.idioms.makeasiftodo
  //v.phr.make-out.
  //v.phr.make-out.
  //v.phr.make_out.
  //   let formPart = theProps.label.substring(0,theProps.label.lastIndexOf('.'));
    let theKeys = keys(formsOutCssMapping);
    let splits = theProps.label.split(".");
    let phraseOrIdioms = splits[1]==="phr"||splits[1]==="idioms";
    let formPart = theKeys.find((theKey)=>phraseOrIdioms?(splits[0]+"."+splits[1])===theKey:splits[0]===theKey);
    let theForm = formsOutCssMapping[formPart];
    return {"--color-formOut-default":`var(--color-`+theForm+`)`,
        "--color-formOut-default-bg-color-editing":`var(--color-`+theForm+`-bg-color-editing)`}
})

function closeTagFunc(){
    emits("closeTag",theProps.label);
}
</script>

<template>

    <el-tag v-if="!pickedDoneClosableSw" class="pickedDoneFormCountTagClosable" @close="closeTagFunc" :style="styleObject">
        <CommonTagDisplay :label="label" />
    </el-tag>
  <!--  </el-tag>-->
    <el-tag v-else closable class="pickedDoneFormCountTagClosable" @close="closeTagFunc" :style="styleObject">
        <CommonTagDisplay :label="label" />
    </el-tag>
</template>

<style scoped>
.el-tag.pickedDoneFormCountTagClosable{
    font-weight: 520;
    --el-font-size-base: 12px;
    line-height: 8px;
    height: var(--common-tag-height);
    padding:7px 4px;
    /*margin: 3px;*/
    --el-tag-border-radius: 3px;
    border-style: none;
    --myclosable-text-color: #ffffff;
//--el-tag-bg-color: var(--color-nounsOut);
    --el-tag-bg-color: var(--color-formOut-default);
//--el-tag-hover-color: var(--color-nounsOut-bg-color-editing);
    --el-tag-hover-color: var(--color-formOut-default-bg-color-editing);
    --el-tag-text-color:var(--myclosable-text-color);
    color: var(--myclosable-text-color);
//background-color: var(--color-nounsOut);
    background-color: var(--color-formOut-default);

    .el-tag__close{
    //color: var(--color-nounsOut);
        color: var(--color-formOut-default);
    }
}

.el-tag.pickedDoneFormCountTagClosable.sticky{

}

</style>